<template>
  <div class="comment-item"
    :style="{ paddingLeft: parentId === 0 ? '60px': '0' }"
  >
    <div
      v-for="(item, index) in list"
      :key="index"
      class="comment-list"
    >
      <div class="head-img">
        <img fit="cover" :class="[item.parent_id === 0 ? 'parent-head' : 'child-head']" :src="getUserPhoto('user', item.user_id, 'photo')">
        <div class="comment-info">
          <div class="user">
            {{ item.user_name }}
            <span class="tag">
              作者
            </span>
            <p class="reply">
              {{name && '回复'}}
            </p>
            {{ name && name }}
          </div>
          <div class="comment">{{ item.comment }}</div>
          <div class="reply-btn" @click="handleReply(item)">
            回复
          </div>
          <div style="cursor: pointer;display: inline-block;" @click="delReply(item)" v-if="$store.state.user?.info?.user_info?.data_id == item.user_id">
            删除
          </div>
          <el-form v-show="$store.getters['user/getShowComment'] === item?.data_id" :inline="true" :model="formInline">
            <el-form-item>
              <el-input
                v-model="formInline.comment"
                type="textarea"
                resize="none"
                maxlength="2000"
                show-word-limit
                placeholder="请输入评论内容">
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="release-comment" @click="onSubmit(item.data_id)">
                发布评论
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <comment v-if="item.children" :list="item.children" :name="item.user_name" :parentId="item.parent_id" />
    </div>
  </div>
</template>

<script>
import { getUserPhoto } from '@/utils/downloadFile';
import comment from "./comment.vue";
export default {
  name: "comment",
  components: { comment },
  props: {
    name: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    parentId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formInline: {
        comment: ''
      },
      showCommentInput: '',
      newList: []
    }
  },
  watch: {
    '$route'(val) {
      console.log('路由发生了变化')
      console.log(this.$store.state.user.showComment)
      this.$store.commit('user/SET_SHOWCOMMENT', '')
    }
  },
  mounted() {},
  methods: {
    getUserPhoto,
    handleReply(item) {
      if (this.$store.state.user.token) {
        this.$store.commit('user/SET_SHOWCOMMENT', item.data_id)
      } else {
        this.$message.warning('请您先登陆')
      }
    },
    delReply(item) {
      this.$api.delComment({ data_id: item.data_id }).then(res => {
        console.log(res)
        this.getCommentList()
      })
    },
    buildTree(nodes, rootId) {
      const map = new Map();
      const tree = [];
      // 将每个节点存入map中
      for (const node of nodes) {
        map.set(node.data_id, { ...node, children: [] });
      }
      // 将每个节点添加到其父节点下
      for (const node of map.values()) {
        if (node.parent_id === rootId) {
          tree.push(node);
        } else {
          const parent = map.get(node.parent_id);
          if (parent) {
            parent.children.push(node);
          }
        }
      }
      return tree;
    },
    getCommentList() {
      const params = {
        works_id: this.$route.query.data_id
      }
      this.$store.dispatch('user/getComment', params)
    },
    onSubmit(parent_id) {
      console.log('this.comment', this.formInline.comment)
      if (this.formInline.comment && this.formInline.comment.trim()) {
        const params = {
          works_id: this.$route.query.data_id - 0,
          comment: this.formInline.comment,
          parent_id
        }
        // this.$emit('replyComment', params)
        this.replyComment(params)
      } else {
        this.$message.error('请输入评论内容')
      }
    },
    replyComment(params) {
      this.$store.dispatch('user/replyComment', params).then(res => {
        this.getCommentList()
      })
    }
  }
};
</script>

<style lang="less" scoped>
.comment-list {
  margin-bottom: 32px;
}

.release-comment {
  width: 100px;
  height: 36px;
  background: #E0CBB4;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  display: inline-flex;
  float: right;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.parent-head {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.child-head {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.head-img {
  display: flex;

  .comment-info {
    margin-left: 15px;

    .user {
      font-size: 18px;
      font-weight: bold;
      color: #000000;
      margin-bottom: 17px;
      display: inline-flex;
      justify-content: center;
      align-items: center;

      .tag {
        // width: 36px;
        // height: 18px;
        padding: 3px 6px;
        background: #E0CBB4;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: bold;
        color: #333333;
        margin-left: 8px;
      }

      .reply {
        font-size: 18px;
        font-weight: 400;
        display: inline-block;
        margin: 0 7px;
      }
    }

    .comment {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 16px;
    }

    .reply-btn {
      width: 56px;
      height: 32px;
      background: #F5F5F5;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24px;
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
</style>